<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta charset="utf-8">
	<title>列表渲染</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
	<ul id="example-1">
	  	<li v-for="item in items">
	    	{{ item.message }}
	 	 </li>
	</ul>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#example-1",
			data: {
				items:[
					{message:"陈昊"},
					{message:"真帅"},
					{message:"好帅"},
					{message:"特别帅"},
				]
			}
		})
	</script>




	<!-- 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。 -->
	<!-- 也可以用 of 替代 in 作为分隔符 -->
	<ul id="example-2">
	 	<li v-for="(item, index) of items">
	    	{{ parentMessage }} - {{ index }} - {{ item.message }}
	  	</li>
	</ul>
	<script type="text/javascript">
		var example2 = new Vue({
		  	el: '#example-2',
		  	data: {
		    	parentMessage: 'Parent',
		    	items: [
		      		{ message: 'Foo' },
		      		{ message: 'Bar' }
		    	]
		  	}
		})
	</script>




	<!-- 一个对象的 v-for -->
	<div id="v-for-object">
		<ul class="demo">
			<li v-for="value in object">
			    {{ value }}
			</li>
		</ul>



		<!-- 你也可以提供第二个的参数为键名： -->
		<div v-for="(value, key) in object">
		  	{{ key }}: {{ value }}
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
		  	el: '#v-for-object',
		  	data: {
			  	object: {
			    	firstName: 'John',
		     		lastName: 'Doe',
		      		age: 30
		    	}
		  	}
		})






		/*
			1.filter():遍历
			2.concat() 方法用于连接两个或多个数组
			3.
		*/
		/*vm.items = vm.items.filter(function (item) {
		  	return item.message.match(/帅/)
		})*/
	</script>

	<!-- 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 -->




	<script type="text/javascript">
		// 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
		// 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
		// 当你修改数组的长度时，例如：vm.items.length = newLength
		// 为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
		// // Vue.set
		// Vue.set(example1.items, indexOfItem, newValue)
		// // Array.prototype.splice
		// example1.items.splice(indexOfItem, 1, newValue)
		// 为了解决第二类问题，你可以使用 splice：
		//example1.items.splice(newLength)
	</script>


	<div id="app0">
		<ul v-for = "(value,key,index) in userProfile">
			{{index}}.{{key}}:{{value}}
		</ul>
	</div>
	<script type="text/javascript">
		var vm1 = new Vue({
			el:"#app0",
			data: {
				a: 1,
				userProfile:{}
			}
		})
		// `vm.a` 现在是响应式的

		vm1.b = 2
		// `vm.b` 不是响应式的

		vm1.$set(vm1.userProfile, 'age', 27);
		Vue.set(vm1.userProfile, 'name', "陈昊");
		// 是响应式的
	</script>






	<ul id="com">
		<!-- <li v-for="n in evenNumbers">{{ n }}</li> -->
		<li v-for="n in even(numbers)">{{ n }}</li>
	</ul>
	<script type="text/javascript">
		var com = new Vue({
			el:"#com",
			data: {
			  	numbers: [ 1, 2, 3, 4, 5 ]
			},
			// computed: {
			//   	evenNumbers: function () {
			//     	return this.numbers.filter(function (number) {
			//     		console.log()
			//       		return number % 2 === 0
			//     	})
			//  	}
			// }

			methods: {
			  	even: function (numbers) {
			    	return numbers.filter(function (number) {
			      		return number % 2 === 0
			    	})
			  	}
			}
		})
	</script>















	<!--
		v-for && v-if
		当它们处于同一节点，v-for 的优先级比 v-if 更高
	-->
	<div id="vIf">
		<ul>
			<li v-for="todo in todos" v-if="!todo.isComplete">
		  		{{ todo }}
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		var vIf = new Vue({
			el: "#vIf",
			data: {
				todos:[
					{number:1,isComplete:false},
					{number:2,isComplete:true},
					{number:3,isComplete:false},
					{number:4,isComplete:true},
					{number:5,isComplete:false},
				]
			}
		})
	</script>




	<!--
		当在组件中使用 v-for 时，key 现在是必须的。
		<component></component>
	-->

	<div id="todo-list-example">
	  	<input
	    	v-model="newTodoText"
	   		v-on:keyup.enter="addNewTodo"
	   		placeholder="Add a todo">
  		<ul>
  			<!-- 属性、props和{{}}的名字一样 -->
		    <li
		      is="todo-item"
		      v-for="(todo, index) in todos"
		      v-bind:key="todo.id"
		      v-bind:title="todo.title"
		      v-bind:index="index"
		      v-on:remove="todos.splice(index, 1)"
		    ></li>
  		</ul>
	</div>
	<script type="text/javascript">
		Vue.component('todo-item', {
		  template: '\
		    <li>\
		    	{{ index }}\
		      	{{ title }}\
		      	<button v-on:click="$emit(\'remove\')">X</button>\
		    </li>\
		  ',
		  props: ['title','index']
		})

		new Vue({
		  el: '#todo-list-example',
		  data: {
		    newTodoText: '',
		    todos: [
		      {
		        id: 1,
		        title: 'Do the dishes',
		      },
		      {
		        id: 2,
		        title: 'Take out the trash',
		      },
		      {
		        id: 3,
		        title: 'Mow the lawn'
		      }
		    ],
		    nextTodoId: 4
		  },
		  methods: {
		    addNewTodo: function () {
		      this.todos.push({
		        id: this.nextTodoId++,
		        title: this.newTodoText
		      })
		      this.newTodoText = ''
		    }
		  }
		})
	</script>
</body>
</html>